<template>
  <Taber> </Taber>
  <div class="ContactCustomerService">
    <h3>联系客服</h3>
    <p>遇到疑问可以先查看下面的教程文章寻找答案，如果没找到请联系客服：</p>
    <p>客服QQ：2778394651【优先回复处理】</p>
    <p>客服TG：@zhao_best【发送账号信息请选择此方式】</p>
    <p>客服邮箱：service@haotaotao.store【回复速度较慢】</p>
    <p>在线时间：工作日(12:00 - 22:00) 节假日不定时上线</p>
  </div>
  <div class="conter-box">
    <div class="conter-left-box">
      <div class="category-nav">
        <h2>分类导航</h2>
        <div
          class="nav-item"
          v-for="(item, index) in 4"
          :key="index"
          @click="handleClick(index)"
          :style="{ backgroundColor: currentIndex == index ? '#f0f0f0' : '' }"
        >
          <div class="nav-icon">
            <img
              style="width: 25px; height: 25px"
              :src="'https://pic.haotaotao.store/image/9f27adcf9bd884a5a8c99167790bed06.png'"
              alt=""
            />
          </div>
          <div class="nav-text">
            <span>条款政策+{{ index }}</span>
            <span class="article-count">
              <span class="tag">3个文章</span>
            </span>
          </div>
        </div>
      </div>
      <!-- 热门商品部分 -->
      <div class="hot-products">
        <h2>热门商品</h2>
        <div class="product-item" v-for="(product, index) in 4" :key="index">
          <div class="product-icon">
            <img
              style="width: 50px; height: 50px"
              :src="'https://pic.haotaotao.store/image/6d67e20481f6f0beee22f40c39d9c4e1.png'"
              alt=""
            />
          </div>
          <div class="product-text">
            <span>Instagram新号(0702)...</span>
            <span class="product-desc">
              <span>人工发货</span>
              <span>价格: 0.5</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="conter-right-box">
      <div
        v-for="i in 4"
        style="margin-top: 20px"
        :ref="(el) => setRightBoxRef(el, i - 1)"
      >
        <div class="policy-header">
          <h1 style="font-size: 20px">条款政策+{{ i }}</h1>
          <span class="article-count">文章数量: 3</span>
        </div>
        <div
          class="policy-item"
          v-for="(item, index) in 3"
          :key="index"
          @click="routerClick"
        >
          <div class="policy-icon">
            <img
              :src="'https://pic.haotaotao.store/image/627c796833ae927bc5b854bd699c5920.png'"
              alt="icon"
            />
          </div>
          <div class="policy-content">
            <h2>免责说明</h2>
            <p>网站的免责声明，请仔细阅读。</p>
            <div class="policy-meta">
              <span>4个月前</span>
              <span> 364</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <LastPageBar> </LastPageBar>
</template>

<script setup>
import Taber from "../components/Taber.vue";
import LastPageBar from "../components/LastPageBar.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, onBeforeUnmount } from "vue";

let currentIndex = ref(0);
const rightBoxRefs = ref([]); // 存储每个右侧区块的 ref
const router = useRouter();
function routerClick() {
  router.push({ path: "/notice" });
}

// 设置 ref 的方法
const setRightBoxRef = (el, index) => {
  rightBoxRefs.value[index] = el;
};

const handleClick = (index) => {
  currentIndex.value = index;

  // 点击后让对应的右侧块滚动到视图中
  if (rightBoxRefs.value[index]) {
    rightBoxRefs.value[index].scrollIntoView({
      behavior: "smooth", // 平滑滚动
      block: "center", // 滚动到顶部对齐
    });
  }
};
</script>

<style>
.ContactCustomerService {
  width: 50%;
  margin: 0 auto;
  background-color: white;
  padding: 12px;
  border-radius: 12px;
  margin-top: 20px;
}

.conter-box {
  width: 50%;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.conter-left-box {
  width: 40%;
  text-align: center;
  background-color: white;
  border-radius: 5px;
  height: 674px;
  margin-top: 20px;
  position: sticky;
  top: 155px;
}

.category-nav {
  background-color: white;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.category-nav h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f0f0;
}

.nav-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.nav-text {
  display: flex;
  width: 75%;
  justify-content: space-between;
}

.nav-text span {
  font-size: 14px;
}

.article-count {
  color: #888;
}

.tag {
  background-color: #c6e48b;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* 热门商品样式 */
.hot-products {
  background-color: white;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.hot-products h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: space-around;
}

.product-item:hover {
  background-color: #f0f0f0;
}

.product-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.product-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-text span {
  font-size: 14px;
}

.product-desc {
  color: #888;
}

.conter-right-box {
  width: 60%;
  margin-left: 24px;
}

.policy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  background-color: white;
  padding: 6px;
  border-radius: 6px;
}

.policy-icon {
  width: 60px;
  margin-right: 15px;
}

.policy-icon img {
  width: 100%;
}

.policy-content h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.policy-content p {
  font-size: 14px;
  color: #555;
}

.policy-meta {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.policy-item {
  background-color: white;
  display: flex;
  padding: 12px;
  /* justify-content: space-around; */
  align-items: center;
}
</style>
